<template>
  <div class="right-chart-3">
    <div class="rc3-station">
      <div class="rc-box" v-for="(item,index) in sData[showIdx]" :key="item.id">
        <span class="rs-name" @click="stationJump(index)" :class="nowIdx==index?'active':''" @mouseover="stop()" @mouseout="play()">{{item.stattionName}}</span>
        <p class="rc3s-p"><span v-show="sData[showIdx].length-1 != index">跳转</span>
          <img src="./img/pdArrow.png" v-show="sData[showIdx].length-1 != index" />
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { machineInfo } from "@/network/home";
const TIMES = 8;
export default {
  name: "RightChart3",
  data() {
    return {
      sData: [],
      showIdx: 0,
      nowIdx: 0,
      timer: null,
    };
  },
  mounted() {
    this.getMachineInfo();
  },
  methods: {
    getMachineInfo() {
      machineInfo().then((res) => {
        let { data } = res.data;
        console.log("data", data);
        let a = JSON.parse(JSON.stringify(data[0]));
        data.push(a);
        this.sData = this.splitData(data, 5);
        this.$emit("toTwoPage", data[0]);
        this.orderTime();
      });
    },
    orderTime() {
      this.timer = setInterval(() => {
        if (this.nowIdx == this.sData[this.showIdx].length - 1) {
          this.nowIdx = 0;
          this.showIdx == this.sData.length - 1
            ? (this.showIdx = 0)
            : (this.showIdx += 1);
        } else {
          this.nowIdx += 1;
        }
        this.$emit("toTwoPage", this.sData[this.showIdx][this.nowIdx]);
      }, TIMES * 1000);
    }, //对象数组拆分
    splitData(arr, N) {
      let result = [];
      if (arr.length > N) {
        for (let i = 0; i < arr.length; i += N) {
          let a = arr.length - (i + N);
          if (a < 0) {
            let cha = -a;
            let newA = arr.slice(i, arr.length);
            let newB = arr.slice(0, cha);
            let newArr = [...newA, ...newB];
            result.push(newArr);
            i = cha - N;
          } else {
            result.push(arr.slice(i, i + N));
          }
        }
      } else {
        result.push(arr);
      }
      return result;
    },
    stop() {
      clearInterval(this.timer);
    },
    play() {
      this.orderTime();
    },
    stationJump(index) {
      // console.log("station", index);
      this.$emit("toTwoPage", this.sData[this.showIdx][index]);
      // console.log(
      //   "this.sData[this.showIdx][index]",
      //   this.sData[this.showIdx][index]
      // );
      this.nowIdx = index;
    },
  },
};
</script>
<style lang="less">
.active {
  color: #f00;
}
.right-chart-3 {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  .rc3-station {
    display: flex;
    justify-content: center;
    align-items: center;
    .rc-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 11vh;

      .rs-name {
        margin-top: 20px;
        font-size: 14px;
        cursor: pointer;
      }
      .rc3s-p {
        position: relative;
        margin: 1.4em 6px;
        span {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          font-size: 14px;
        }
        img {
          vertical-align: middle;
          width: 84%;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>